<!--
 * @Author: lhl
 * @Date: 2021-12-30 08:33:15
 * @LastEditTime: 2022-01-06 18:07:51
 * @LastEditors: lhl
 * @Description: 监测点信息
 * @FilePath: \briup\teamwork\briup-webUI-2group-teamwork\am-ui\src\pages\am\monitor\PointInfo.vue
 * 别乱动！
-->
<template>
  <div class="Monthly">
    <div class="content">
      <div class="left">
        <el-input v-model="keyWords" placeholder="请输入关键字" clearable @input="toHandler">
        </el-input>
        <!-- 工程设备树 -->
        <el-tree :data="edTree" :props="props" @node-click="handleNodeClick"></el-tree>
      </div>
      <div class="right">
        <!-- {{ params }} -->
        <div v-if="params.device_id">
          <!-- 搜索框和下载按钮区域-->
          <div class="engineertable">
            <div class="head el-icon-s-goods" style="width: 100%">工程信息</div>
            <!-- 工程表单 -->
            <div class="form">
              <el-form>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="工程编号:">{{
                      engineer.serial_number
                    }}</el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="工程名称:">{{
                      engineer.name
                    }}</el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="工程状态:">
                      <template>
                        <el-tag v-if="engineer.status == '监测中'" type="success">监测中</el-tag>
                        <el-tag v-else-if="engineer.status == '已结束'" type="danger">已结束</el-tag>
                      </template>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="工程类型:">{{
                      engineer.type
                    }}</el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="开始时间:">
                      <span v-if="engineer.create_time == null">暂未开始</span>
                      <span v-else> {{ engineer.create_time | fmtTime }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="结束时间:">
                      <template>
                        <span v-if="engineer.finish_time == null">暂未结束</span>
                        <span v-else> {{ engineer.end_time | fmtTime }}</span>
                      </template>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="工程地址:">{{
                      engineer.address
                    }}</el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
          <div class="devicetable">
            <div class="head el-icon-s-goods" style="width: 100%">设备信息</div>

            <el-form>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="设备编号:">{{
                    resdata.serial_number
                  }}</el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="设备名称:">{{
                    resdata.name
                  }}</el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="绑定状态:"><template>
                      <el-tag v-if="resdata.bind_status == 1" type="success">已绑定</el-tag>
                      <el-tag v-else-if="resdata.bind_status == 0" type="danger">未绑定</el-tag>
                    </template></el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="在线状态:">
                    <template>
                      <el-tag v-if="resdata.online_status == 1" type="success">在线</el-tag>
                      <el-tag v-else-if="resdata.online_status == 0" type="danger">离线</el-tag>
                    </template>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        <div v-else class="notice">请先选择工程下的设备</div>
      </div>
    </div>
  </div>
</template>     
<script>
import { get } from '@/utils/request.js'

export default {
  data() {
    return {
      resdata: {},
      engineer: {},
      edTree: [],
      props: {
        label: 'name',
        value: 'id'
      },
      params: {
        page: 1,
        pageSize: 50
      },
      monthData: [],
      keyWords: '',
      value1: ''
    }
  },
  methods: {
    // 树形节点点击事件
    handleNodeClick(data) {
      // 判断用户点击的是否是设备，点击工程时不查询数据
      if (data.engineer_id) {
        this.params = {
          ...this.params,
          engineer_id: data.engineer_id,
          device_id: data.id
        }
        // 调用请求数据的方法
        this.findDeviceDetail()
      }
    },
    //查询所有工程名称
    findEngineername() {
      get('/engineer/pageQuery', {
        page: 1,
        pageSize: 10
      }).then(res => {
        this.engineers = res.data.list
      })
    },
    // 请求监测点数据
    findDeviceDetail() {
      get('/device/findDeviceDetail', {
        id: this.params.device_id
      }).then(res => {
        this.resdata = res.data
        this.engineer = res.data.engineer
        // console.log(this.engineer);
      })
    },

    // 查询工程设备树
    findEngineerDeviceTree() {
      get('/engineer/findEngineerDeviceTree').then(res => {
        this.edTree = res.data
      })
    },
    MonthData() {},
    // 根据工程设备ID检索该月设备数据
    queryMonthData() {
      get('/monitor/queryMouthData', this.params).then(res => {
        this.monthData = res.data
      })
    },
    toSearchHandler() {
      this.findDeviceDetail()
    },
    //模糊搜索关键字
    toHandler() {
      if (this.keyWords == '') {
        this.findEngineerDeviceTree()
      }
      this.edTree = this.edTree.filter(item => item.name.match(this.keyWords))
    }
  },
  created() {
    // 查询工程设备树
    this.findEngineerDeviceTree()
    // this.queryMonthData();
    this.findEngineername()
  }
}
</script>
<style scoped>
.content {
  display: flex;
}
.left {
  width: 30%;
  border-right: 1px solid #b9b7b7;
  padding-right: 20px;
  margin-right: 20px;
}
.right {
  width: 70%;
}
.notice {
  height: 500px;
  line-height: 500px;
  text-align: center;
  font-size: 30px;
  color: #999;
}
.icon {
  display: block;
  width: 100%;
}
.head {
  background-color: #f4f4f4;
  height: 25px;
  font-size: 16px;
  line-height: 25px;
  padding-left: 20px;
}
</style>